<!--suppress ALL -->
<script setup lang="ts">
// 作用域插槽
// props接收数据
defineProps(["todos"]);
</script>

<template>
<div class="test1">
<h1>Todos展示</h1>
  <ul>
    <li  v-for="(item,index) in todos" :style="{color: item.done?'green':'red'}"  :key="item.id">
<!--        {{item.title}}-->
<!--      作用域插槽:可以将数据回传给父组件-->
      <slot :$row="item" :$index="index"></slot>
    </li>
  </ul>
</div>
</template>

<style scoped>
.test1 {
  background: deepskyblue;
  height: 500px;
}
</style>